{extend name="/base/base" /}
{block name="content"}
    <div>
        <a class="layui-btn pull-right" href="{:url('add')}">添加</a>
        <div class="layui-clear"></div>
    </div>
    <div class="layui-form dream-table-search">
        <div class="layui-inline">
            <input type="text" name="title" class="layui-input" placeholder="标题">
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">创建时间</label>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" name="create_time_min" class="layui-input" id="create_time_min">
            </div>
            <div class="layui-form-mid">-</div>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" name="create_time_max" class="layui-input" id="create_time_max">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">更新时间</label>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" name="edit_time_min" class="layui-input"  id="edit_time_min">
            </div>
            <div class="layui-form-mid">-</div>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" name="edit_time_max" class="layui-input"  id="edit_time_max">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="password" name="" autocomplete="off" class="layui-input">
            </div>
        </div>
        <button class="layui-btn layui-btn-normal pull-right">搜索</button>
    </div>

    <table id="table" lay-filter="table"></table>
    <script type="text/html" id="operate">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
{/block}

{block name="js"}
    <script>
        layui.use(['table', 'layer', 'laydate'], function(){
            var table = layui.table,
                $ = layui.jquery,
                layer = layui.layer,
                laydate = layui.laydate;

            // 搜索栏
            laydate.render({
                elem: '#create_time_min' //指定元素
            });

            laydate.render({
                elem: '#create_time_max', //指定元素
                max:0,
                done:function (value, date, endDate) {
                    if ($('#create_time_min').val() > value) {
                        layer.open({
                            title: '温馨提示',
                            content: '最大时间不能小于最小时间'
                        });
                        $('#create_time_max').val('');
                    }
                }
            });

            laydate.render({
                elem: '#edit_time_min' //指定元素
            });

            laydate.render({
                elem: '#edit_time_max' //指定元素
            });


            //第一个实例
            table.render({
                elem: '#table',
                // height: 315,
                url: "{:url('tableHandle', ['returnStyle'=>'layui'])}", //数据接口
                page: true, //开启分页
                cols: [[ //表头
                    {field: 'id', title: 'ID', sort: true, fixed: 'left'},
                    {field: 'sort_name', title: '所属栏目'},
                    {field: 'title', title: '标题', sort: true},
                    {field: 'tags_name', title: '标签'},
                    {field: 'create_date', title: '创建时间', sort: true, align:'center'},
                    {field: 'edit_date', title: '更新时间', sort: true, align:'center'},
                    {field: '', title: '操作', align:'center', toolbar: '#operate'}
                ]],
                limits:[15,30,50,100],
                initSort: {
                    field: 'id', //排序字段，对应 cols 设定的各字段名
                    type: 'desc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
                },
                'test':"暂无数据"
            });


            //监听工具条
            table.on('tool(table)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; // 获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的DOM对象

                if(layEvent === 'detail'){ //查看
                    //do somehing
                } else if(layEvent === 'del'){ //删除
                    layer.confirm('真的删除行么', function(index){
                        //向服务端发送删除指令
                        $.ajax({
                            url : "{:url('deleteHandle')}",
                            type : "POST",
                            // contentType: "application/json;charset=utf-8", // 上传内容的格式
                            data : data, // {id:data.id}
                            dataType : "json", // 返回的数据格式
                            success : function(result) {
                                if (result.status == 'success') {
                                    layer.msg(result.msg, {icon: 1});
                                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                                } else {
                                    layer.msg(result.msg, {icon: 2});
                                }
                            },
                            error:function(result){
                                layer.msg(result.msg, {icon: 2});
                            }
                        })
                        layer.close(index);
                    });
                } else if(layEvent === 'edit'){ //编辑
                    //do something
                    window.location.href="edit?id="+data.id;
                    // var index = layer.open({
                    //     title:'修改文章',
                    //     type:2,
                    //     content:"edit?id="+data.id,
                    //     maxmin:true,
                    // });
                    // layer.full(index);

                    //layer.close(index);
                    //同步更新缓存对应的值
                    // obj.update({
                    //     username: '123'
                    //     ,title: 'xxx'
                    // });
                }
            });
        });
    </script>
{/block}